<template>
  <div class="brand">
    <div class="b-wu"></div>
    <div class="header">
      <div class="header-font">查批号</div>
      <img
        @click="callBack"
        src="../inchildren/image/jifen_icon_fanhui.png"
        alt=""
      />
    </div>
    <div class="b-border"></div>

    <!-- 搜索框 -->
    <div class="search_box">
      <img src="../inchildren/image/dingzhi_icon_sousuo.png" alt="" />
      <div class="search_box1">
        <input type="text" placeholder="品牌查询信息会持续更新哦～">
      </div>
      <span>搜索</span>

    </div>
    <!-- 热门品牌 -->
    <h5 class="b-Hot-h5">热门品牌</h5>
    <div class="b-letter">
      <ul>
        <li
          v-for="(letter, index) in letterlist"
          :key="index"
          :class="index === letter2 ? 'active' : ''"
          @click="letterClick(index)"
        >
          {{ letter }}
        </li>
      </ul>
    </div>
    <div class="b-Hot">
      <div class="b-fanage">
        <ul>
          <li v-for="(item, index) in hotList" :key="index">
            <img :src="item.img" alt="" />
            <p>{{ item.titme }}</p>
          </li>
        </ul>
      </div>
    </div>
    <h2 class="b-A">A</h2>

    <div class="b-classify" v-for="(data, index) in hotLists" :key="index">
      <div class="b-cla">
        <img :src="data.img" alt="" />
      </div>
      <p>{{ data.title }}</p>
    </div>

    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotList: [
        {
          img: require("../inchildren/image/icon-pic1.png"),
          titme: "雅诗兰黛",
        },
        {

          img: require("../inchildren/image/49333c30f0013cdac9c4cfd3577a74aaed753b5b9257-lkFm6I_fw658 小的副本.png"),
          titme: "科颜氏",
        },
        {
          img: require("../inchildren/image/395eec08dd64760b21ecdee04070ff91ec2919ec5dce-KJ1hIQ_fw658 小的副本.png"),
          titme: "珂润",
        },
        {
          img: require("../inchildren/image/WechatIMG904.png"),
          titme: "安热沙",
        },
        {
          img: require("../inchildren/image/WechatIMG905.png"),
          titme: "娇韵诗",
        },
        {
          img: require("../inchildren/image/WechatIMG906.png"),

          titme: "欧莱雅",
        },
        {
          img: require("../inchildren/image/WechatIMG907.png"),
          titme: "兰蔻",
        },
        {
          img: require("../inchildren/image/WechatIMG908.png"),
          titme: "资生堂",
        },
      ],
      hotLists: [
        {
          img: require("../inchildren/image/WechatIMG909.png"),
          title: "A.H.C/爱和纯",
        },

        {
          img: require("../inchildren/image/WechatIMG910.png"),
          title: "ACQUA ALLE ROSE",
        },

        {
          img: require("../inchildren/image/WechatIMG911.png"),
          title: "Acqua Di Parma/帕尔玛之水",
        },

        {
          img: require("../inchildren/image/WechatIMG912.png"),
          title: "Albion/澳尔滨",
        },

        {
          img: require("../inchildren/image/WechatIMG913.png"),
          title: "Aesop/伊索",
        },
      ],
      letterlist: [
        "热",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      letter2: 0,
    };
  },
  methods: {
    callBack() {
      console.log(1);
      this.$router.push({ name: "batch" });
    },
    letterClick(index) {
      console.log(1);
      this.letter2 = index;
    },
  },
};
</script>

<style lang="scss" >


* {
  margin: 0;
  padding: 0;
}

body{
  background-color: #fff;
}
.b-wu {
  width: 750px;
  height: 88px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.header {
  width: 750px;
  height: 88px;
  /* padding-bottom: 30px; */
  border-bottom: 1px solid #707070;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.header img {
  width: 15px;
  height: 27px;
  margin-left: 48px;
  position: absolute;
  top: 35px;
}
.header-font {
  width: 550px;
  height: 88px;
  font-size: 34px;
  display: block;
  font-family: PingFangSC-Medium-, PingFangSC-Medium;
  font-weight: 800;
  color: #2f2f2f;
  line-height: 88px;
  text-align: center;
  margin: 0 auto;
  /* -webkit-background-clip: text; */
}
.b-brand {
  /* display: block; */
  display: inline-block;
  width: 180px;
  height: 88px;
  background-color: #f2f2f2;
  font-size: 30px;
  font-family: PingFangSC-Medium-, PingFangSC-Medium;
  font-weight: normal;
  color: #2f2f2f;
  text-align: center;
  line-height: 88px;
  border-radius: 48px 0px 0px 48px;
}

/* 搜索框 */

/* .van-search__action{
  background: #fff;
} */
.search_box{
  margin-top: 30px;
  display: flex;
  width: 750px;
  position: relative;
  height: 64px;
  // background-color: red;
  padding: 0 50px;
// background: #F2F2F2;
opacity: 1;
}
.search_box img{
  position: absolute;
  left: 90px;
  top: 18px;
  width: 28px;
  height: 28px;
}
.search_box1{
  width: 548px;
  margin-left: 5px;
height: 64px;

border-radius: 48px 48px 48px 48px;
background-color: #f2f2f2;
}
.search_box1 input{
background: #F2F2F2;
padding-top: 5px;
  width: 450px;
  height: 64px;
border-radius: 0px 48px 48px 0px;
outline: none;
border: 0;
margin-left: 98px;
}
.search_box1 input::-webkit-input-placeholder {
font-size: 24px;
font-family: PingFang SC-Light, PingFang SC;
font-weight: 300;
color: #999999;
}


.search_box span{
  margin-top: 10px;
  margin-left: 15px;
width: 60px;
height: 42px;
font-size: 30px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #2F2F2F;
}

.sousuo {
  width: 60px;
  height: 42px;
  font-size: 30px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
}

.search-icon {
  position: relative;
  width: 750px;
  height: 130px;
  /* background: blue; */
  margin-top: 25px;
}
.search-icon img {
  width: 31px;
  height: 31px;
  position: absolute;
  left: 120px;
  top: 16px;
}



    
/* 热门 */

.b-Hot {
  width: 750px;
}

.b-Hot-h5 {
  width: 136px;
  height: 48px;
  margin-top: 15px;
  font-size: 34px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  margin-left: 50px;
}

.b-fanage {
  width: 750px;
  padding: 0 86px 0 58px;
  /* display: flex;
  justify-content: space-between; */
}

.b-fanage ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #fff;
}
.b-fanage li {
  width: 130px;
  height: 109px;
  margin-top: 25px;
  opacity: 1;
  /* background: red; */
  /* border-style: dashed #2f2f2f 1px; */
  border: 2px dashed rgba(0, 0, 0, 0.695);
  position: relative;
}
.b-fanage li img {
  width: 126px;
  height: 96px;
}
.b-fanage li p {
  width: 88px;
  height: 30px;
  position: absolute;
  font-size: 22px;
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #2f2f2f;
  text-align: center;
  top: 88px;
  left: 20px;
}

.b-A {
  width: 750px;
  height: 32px;
  background: #f2f2f2;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 30px;
  font-size: 20px;
  padding: 0 38px;
  font-family: PingFang SC-Thin, PingFang SC;
  font-weight: 100;
  color: #2f2f2f;
}
.b-classify {
  width: 750px;
  height: 164px;
  padding: 0 80px 0 50px;
  margin-top: 20px;
  /* background: red; */
}
.b-cla {
  width: 164px;
  height: 164px;
  border: 2px dashed rgba(0, 0, 0, 0.695);
  float: left;
}
.b-cla img {
  width: 160px;
  height: 160px;
}
.b-classify p {
  float: left;
  /* width: 184px; */
  /* height: 42px; */
  font-size: 30px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 42px;
  margin-left: 50px;
  margin-top: 60px;
}

.footer {
  height: 44px;
}
.b-letter ul {
  position: absolute;
  right: 25px;
  top: 300px;
}
.b-letter li {
  font-size: 20px;
  font-family: PingFang SC-Light, PingFang SC;
  font-weight: 300;
  color: #666666;
  margin-top: 10px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  /* position: absolute; */
  /* right: 10px; */
}
.active {
  width: 35px;
  text-align: center;
  line-height: 35px;
  height: 35px;
  background-color: #935aff;
  border-radius: 32px;
  color: #fff;
}
</style>
